<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>登录界面</title>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
		<link rel="stylesheet" type="text/css" th:href="@{css/Phone.css}" />
		<link rel="stylesheet" th:href="@{css/alert.css}">
		<script th:src="@{js/jquery-1.7.2.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{js/jquery.validate.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{js/messages_zh.js}" type="text/javascript" charset="utf-8"></script>
		<script>
			document.documentElement.className = "js";
			var supportsCssVars = function() {
				var e, t = document.createElement("style");
				return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e
			};
			supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
		</script>
	</head>

	<body class="demo-1 loading">

		<div id="frame">
			<!-- 切换按钮 -->
			<div id="button">
				<div id="shouji" onclick="shouji()">
					手机登录
				</div>
				<div id="zhanghao" onclick="zhanghao()">
					账号登录
				</div>
			</div>
		
			<!-- 手机登录 -->
			<div id="phoneLogin">
				<div id="user">
					&nbsp;
					<img th:src="@{img/User.png}" class="logo" />
					<input type="text" name="phone" id="phone" value="" placeholder="请输入手机号" />
				</div>
				<div style="margin-top: 45px;">
				<div class="yan" style="margin-left: 15px">
					<input type="text" id="code" placeholder="请输入验证码" style="margin-top: 0"/>
				</div>
				<div class="huoqu">
					<input type="button" id="phoneCode" value="获取" style="margin-top: 3px;color:rgba(0,0,0,0.6) "/>
				</div>
				</div>
				<div id="sp">
					
				</div>
				
				<div class="login">
					<button type="button" style="margin-top: -35px;" id="login1">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</button>
				</div>
				
			</div>
			<!-- 账号登录 -->
			<div id="userLogin">
				<div id="user1">
					&nbsp;
					<img th:src="@{img/User.png}" class="logo" />
					<input type="text" id="name" value="" placeholder="请输入账号或邮箱" />
				</div>
				<p id="p1"></p>
				<div id="password">
					&nbsp;
					<img th:src="@{img/password.png}" class="logo" />
					<input type="password"  id="pwd" value="" placeholder="请输入密码" />
				</div>
				<p id="p2"></p>
				<div class="login">
					<button type="button" id="login2">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</button>
				</div>
			</div>
		</div>
		
		<main>

			<div class="content">
				<img class="content__img" th:src="@{img/p1.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p2.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p3.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p4.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p5.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p6.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p7.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p8.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p9.png}" alt="Some image" />
				<img class="content__img" th:src="@{img/p10.png}" alt="Some image" />
				
			</div>
			<!--/content-->

		</main>
		<script th:src="@{js/imagesloaded.pkgd.min.js}"></script>
		<script th:src="@{js/TweenMax.min.js}"></script>
		<script th:src="@{js/demo.js}"></script>
		<script th:src="@{js/login.js}"></script>
		<script th:src="@{js/alert.js}"></script>
	</body>

</html>